<template>
    <div>
        <el-form :model="shopRegister" ref="shopRegisterForm" :rules="formRules" 
            label-position="left" label-width="100px"  v-loading="loading"
            class="demo-ruleForm login-container">
            <h3 class="title">店铺入驻</h3>
            <el-form-item prop="name" label="名称">
                <el-input type="text" v-model="shopRegister.name" auto-complete="off"
                    placeholder="请输入店铺名称！"></el-input>
            </el-form-item>
            <el-form-item prop="tel" label="座机">
                <el-input type="text" v-model="shopRegister.tel" auto-complete="off"
                    placeholder="请输入座机！"></el-input>
            </el-form-item>
            <el-form-item prop="address" label="店铺地址">
                <el-input type="text" v-model="shopRegister.address" readonly auto-complete="off" placeholder="请输入地址！"></el-input>
                    <el-button size="small" type="primary" @click="selectAdrress">选择</el-button>
            </el-form-item>
            <el-form-item prop="logo" label="店铺Logo">
                <el-upload
                    class="upload-demo"
                    action="http://localhost:8090/txCos"
                    :before-upload="beforeUpload"
                    :on-success="handleSuccess"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
                <!--<el-input type="text" v-model="shopRegister.logo" auto-complete="off" placeholder="请输入logo！"></el-input>-->
            </el-form-item>
            <h3 class="title">管理员信息设置</h3>
            <el-form-item prop="admin.username" label="账号">
                <el-input type="text" v-model="shopRegister.admin.username" auto-complete="off" placeholder="请输入账号！"></el-input>
            </el-form-item>
            <el-form-item prop="admin.phone" label="手机号码">
                <el-input type="text" v-model="shopRegister.admin.phone" auto-complete="off" placeholder="请输入电话！"></el-input>
            </el-form-item>
            <el-form-item prop="admin.email" label="电子邮件">
                <el-input type="text" v-model="shopRegister.admin.email" auto-complete="off" placeholder="请输入邮件！"></el-input>
            </el-form-item>
            <el-form-item prop="admin.password" label="密码">
                <el-input type="password" v-model="shopRegister.admin.password" auto-complete="off"
                    placeholder="请输入密码！"></el-input>
            </el-form-item>
            <el-form-item prop="admin.confirmPassword" label="确认密码">
                <el-input type="password" v-model="shopRegister.admin.confirmPassword" auto-complete="off"
                    placeholder="请输入确认密码！"></el-input>
            </el-form-item>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" @click.native.prevent="settledIn">入驻</el-button>
            </el-form-item>
        </el-form>
        <el-dialog title="选择地址" :visible.sync="dialogVisable" width="30%">
            <baidu-map :center="{lng: 116.403765, lat: 39.914850}" :zoom="11">
                <bm-view class="map"></bm-view>
                <bm-control :offset="{width: '10px', height: '10px'}">
                    <!--:sugStyle="{zIndex: 2100} 让搜索提示上浮-->
                    <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 2100}">
                        <div style="margin-bottom:10px">
                            <input id="searchInput" type="text" placeholder="请输入关键字" class="searchinput" />
                            <el-button type="success" @click="selectAdrressConfirm">确定</el-button>
                        </div>
                    </bm-auto-complete>
                </bm-control>
                <bm-local-search :keyword="keyword" :auto-viewport="true"></bm-local-search>
            </baidu-map>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisable=false">取 消</el-button>
                <el-button type="primary" @click="dialogVisable=false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import shopApi from '@/api/org/shop'
    export default {
        data() {
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'))
                } else if (value !== this.shopRegister.admin.password) {
                    callback(new Error('两次输入密码不一致!'))
                } else {
                    callback()
                }
            }
            return {
                meals: [],
                keyword: '',
                dialogVisable: false,
                fileList: [],
                loading:false,
                shopRegister: {
                    admin: {
                        username: null,
                        phone: null,
                        email: null,
                        password: null,
                        confirmPassword: null
                    },
                    name: '',
                    tel: '',
                    address: '',
                    logo:''
                },
                formRules: {
                    'name': [
                        { required: true, message: '请输入店铺名称!', trigger: 'blur' }
                    ],
                    'tel': [
                        { required: true, message: '请输入店铺座机!', trigger: 'blur' }
                    ],
                    'address': [
                        { required: true, message: '请输入店铺地址!', trigger: 'blur' }
                    ],
                    'admin.phone': [
                        { required: true, message: '请输入手机号!', trigger: 'blur' }
                    ],
                    'admin.email': [
                        { type: 'email', required: true, message: '请输入邮箱!', trigger: 'blur' }
                    ],
                    'admin.username': [
                        { required: true, message: '请输入账号!', trigger: 'blur' }
                    ],
                    'admin.password': [
                        { required: true, message: '请输入密码!', trigger: 'blur' }
                    ],
                    'admin.confirmPassword': [
                        { required: true, validator: validatePass2, trigger: 'blur' } //自定义校验规则
                    ]
                }
            };
        },
        create(){
            
        },
        methods: {
            selectAdrressConfirm() {
                //获取值搜索框值,设置给地址
                var searchInputV = document.getElementById("searchInput").value;
                this.shopRegister.address = searchInputV;
                //关闭对话框
                this.dialogVisable = false;
            },
            selectAdrress() {
                this.dialogVisable = true;
            },
            upload(res){
                if (res.file) {
                    // 执行上传操作
                    // cos.putObject({
                    // Bucket: 'sangyy-gift-1312587115', /* 存储桶 */
                    // Region: 'ap-chengdu', /* 存储桶所在地域，必须字段 */
                    // Key: "images/rcb/"+this.getUUID()+"_"+res.file.name, /* 文件名 */
                    // StorageClass: 'STANDARD', // 上传模式, 标准模式
                    // Body: res.file, // 上传文件对象
                    // onProgress: (progressData) => { // 上传进度
                    // }
                    // }, (err, data) => {
                    // // 上传成功之后
                    // if (data.statusCode == 200) {
                    //     this.shopRegister.logo = `https:${data.Location}`
                    //     this.$message({message: '上传成功，图片地址：'+this.shopRegister.logo, type: 'success' });
                    // }
                    // })
                }
            },
            //文件上传成功的回调
            handleSuccess(response,file,fileList){
                this.shopRegister.logo = response.resultObj
                this.$message({message: 'logo上传成功，图片地址：'+response.resultObj, type: 'success' });
            },
            //文件删除
            handleRemove(file, fileList) {
                var path = file.response.resultObj
                shopApi.delete(path)
                    .then(response => {
                        this.$message({message: '文件删除成功！', type: 'success' });
                        this.shopRegister.logo = ''
                    }).catch(response => {
                        this.$message({message: '文件删除失败！', type: 'error' });
                    })
            },
            //图片预览
            handlePreview(file) {
                // console.log(file);
            },
            getUUID() {
                var s = [];
                var hexDigits = "0123456789abcdef";
                for (var i = 0; i < 36; i++) {
                s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                }
                s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
                s[8] = s[13] = s[18] = s[23] = "-";
                var uuid = s.join("");
                return uuid;
            },
            beforeUpload(file){
                const type = file.type
                const size = file.size
                if(!(type == 'image/jpg' || type == 'image/jpeg' || type == 'image/png')){
                    this.$message.error('上传头像图片只能是 PNG,JPG,JPEG 格式!')
                    return false;
                }else if(size/1024/1024 > 5){
                    this.$message.error('上传头像图片大小不能超过 5MB!')
                    return false;
                }
            },
            //提交入驻
            settledIn() {
                this.$refs.shopRegisterForm.validate((valid) => {
                    //校验表单成功后才做一下操作
                    if (valid) {
                        this.$confirm('确认入驻吗？', '提示', {}).then(() => {
                            this.loading = true
                            shopApi.settlement(this.shopRegister)
                                .then(response => {
                                    console.log(response);
                                    this.$message({
                                        message: '操作成功，注意查看邮箱，查看审核结果！',
                                        type: 'success'
                                    });
                                    this.loading = false
                                    //重置表单
                                    this.$refs['shopRegisterForm'].resetFields();
                                    //跳转登录页面
                                    this.$router.push({ path: '/' });
                                }).catch(response => {
                                    this.loading = false
                                    this.$message({
                                        message: "入驻失败!",
                                        type: 'error'
                                    });
                                })                            
                        });
                    }
                })
            }
        },
        mounted() {
        }
    }

</script>
<style lang="scss" scoped>
    .login-container {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        background-clip: padding-box;
        margin: 0 auto;
        width: 500px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;

        .title {
            margin: 0px auto 40px auto;
            text-align: center;
            color: #505458;
        }

        .remember {
            margin: 0px 0px 35px 0px;
        }
    }

    .map {
        width: 100%;
        height: 300px;
    }

    .searchinput {
        width: 300px;
        box-sizing: border-box;
        padding: 9px;
        border: 1px solid #dddee1;
        line-height: 20px;
        font-size: 16px;
        height: 38px;
        color: #333;
        position: relative;
        border-radius: 4px;
    }
</style>